<%@page import="org.shop.entity.security.MyUserDetail" %>
<%@page import="org.shop.util.ObjUtil" %>
<%@page import="org.springframework.security.core.context.SecurityContextImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String activityId = request.getParameter("activityId");
    SecurityContextImpl securityContextImpl = (SecurityContextImpl) request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
    MyUserDetail ud = null;
    Byte state = 0;
    if (ObjUtil.isNotNullAndEmpty(securityContextImpl)) {
        ud = (MyUserDetail) securityContextImpl.getAuthentication().getPrincipal();
        state = ud.getState();
    }
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1 user-scalable=0">
    <title>论坛</title>
    <link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
    <link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
    <link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="<%=basePath%>assets/js/jquery-2.1.1.min.js"></script>
    <script src="<%=basePath%>assets/js/fontSize.js"></script>
    <link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
    <script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>

    <style>
        body {
            padding-top: 0.8rem;
            padding-bottom: 1.6rem;
        }

        .header_ul li {
            float: left;
            width: 25%;
        }

        .header_ul li a {
            font-size: 0.28rem;
            height: 0.75rem;
            line-height: 0.8rem;
            padding: 0 0.2rem;
            display: inline-block;
        }

        .title_content i {
            width: 0.26rem;
            height: 0.04rem;
            border-top: 3px solid #FF3F25;
            display: inline-block;
            margin: 0 2px;
        }

        .activity_details {
            background-color: #fff;
            line-height: 0.3rem;
        }

        .activity_intro{
            font-size: 0.28rem;
            color: #666666;
            padding:0.3rem 0.2rem;
        }

        .business_info {
            padding: 0.2rem;
        }

        .activity_detail {
            background-color: #F0F0F0;
        }

        .photo {
            width: 0.8rem;
        }

        .photo img {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
        }

        .name{
            font-size: 0.26rem;
        }
        .info {
            line-height: 0.6rem;
        }

        .activity_introduce {
            line-height: 0.44rem;
            padding: 0.2rem;
            font-size: 0.26rem;
        }

        .activity_img img {
            width: 100%;
            margin: 0.05rem 0;
        }

        .time {
            color: #989898;
            font-size: 0.24rem;
        }

        .focus {
            padding: 0.06rem 0.1rem;
            background-color: #FF3F25;
            color: #fff;
            font-size: 0.24rem;
            margin-top: 0.1rem;
        }

        .operation {
            line-height: 0.8rem;
            text-align: right;
            font-size: 0.26rem;
            margin-top: 0.2rem;
        }

        .operation_btn {
            padding:0.1rem;
            position: relative;
            margin-left: 0.1rem;
        }

        .operation_btn i {
            width:0.4rem;
            height:0.4rem;
            display: inline-block;
            position: absolute;
            top:0.04rem;
            background-size: cover;
            margin-right: 0.06rem;
        }
        .operation_btn span{
            margin-left: 0.5rem;
        }
        .favorite_o{
            background-image: url("<%=basePath%>assets/images/favorite.png");
        }
        .active_favorite{
            background-image: url("<%=basePath%>assets/images/active_favorite.png");
        }

        .hot_reply, .all_reply {
            border-bottom: 1px solid #EFEFEF;
            padding: 0 0.2rem;
        }

        .reply_category {
            line-height: 0.8rem;
            font-size: 0.28rem;
            color: #535353;
        }

        .reply_info {
            line-height: 0.36rem;
            margin-top: 0.02rem;
            font-size: 0.26rem;
        }

        .reply_content {
            margin-left: 0.8rem;
            font-size: 0.28rem;
            line-height: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .reply_area {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: #fff;
            width: 100%;
        }

        .reply_photo {
            width: 1rem;
            margin-left: -100%;
            float: left;
        }

        .reply_photo img {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0.1rem;
            border-radius: 50%;
        }

        .reply_input {
            width: 100%;
            float: left;
        }

        .reply_input input {
            width: 100%;
            border: 1px solid #EAEAEA;
            height: 0.5rem;
            background-color: #EEEEEE;
            outline: none;
            text-indent: 0.2rem;
        }

        .reply_btn {
            width: 1rem;
            background-color: #fff;
            border: none;
            outline: none;
            line-height: 0.8rem;
            margin-left: -1rem;
            float: left;
        }
        .inside_div{
            margin:0 1rem;
        }
        .contact{
            padding:0.2rem;
            line-height: 0.46rem;
            font-size: 0.24rem;
        }
        .apply{
            font-size: 0.24rem;
            color: #fff;
            width:50%;
            line-height: 0.6rem;
            background-color: #FF3F25;
            border:none;
            outline: none;
            border-radius: 0.1rem;
            margin:auto;
            display: block;
            margin-bottom: 0.2rem;
        }
        .apply2{
            font-size: 0.24rem;
            color: #fff;
            width:50%;
            line-height: 0.6rem;
            background-color: #D9D9D9;
            border:none;
            outline: none;
            border-radius: 0.1rem;
            margin:auto;
            display: block;
            margin-bottom: 0.2rem;
        }
    </style>
</head>
<body>
<input id="basePath" type="hidden" value="<%=basePath%>">
<input type="hidden" id="activityId" value="<%=activityId%>" name="activityId"/>
<input type="hidden" id="userPhoto"  name="userPhoto"/>
<input type="hidden" id="userId"  name="userId"/>
<input type="hidden" id="userName"  name="userName"/>
<div class="header">
    <a class="returnInfo" href="#" onclick="window.history.go(-1)"><i class="fa fa-angle-left"></i></a>
    活动
</div>
<div class="activity_details">
    <div class="activity">
        <div class="activity_intro" id="activityTitle">
        </div>
        <div class="activity_detail border-bottom-8">
            <p class="activity_introduce" id="activityContent">
            </p>
            <div class="activity_img">
                <img src="<%=basePath%>assets/images/timg(2).jpg" alt="">
            </div>
            <div class="contact">
                <p class="activity_time">
                    活动时间：<span id="activityTime"></span>
                </p>
                <p class="activity_phone">
                    联系方式：<span id="activityPhone"></span>
                </p>
                <p class="activity_address">
                    活动地址：<span id="activityPlace"></span>
                </p>
                <p class="activity_deadline">
                    报名截止时间：<span id="activityDeadline"></span>
                </p>
            </div>
            <button class="apply" id="applyBtn1" onclick="applyBtn()">我要报名</button>
            <button class="apply2" id="applyBtn2" style="display: none;">名额已满</button>
            <button class="apply2" id="applyBtn2" style="display: none;">名额已满</button>
        </div>
        <div class="reply_list">
            <div class="hot_reply">
                <p class="reply_category">热门回复</p>
            </div>
            <div class="all_reply">
                <p class="reply_category">全部回复</p>
            </div>
        </div>
    </div>
</div>
<div class="reply_area">
    <div class="reply_input">
        <div class="inside_div">
            <input id="content" type="text" placeholder="评论一下吧~">
        </div>
    </div>
    <div class="reply_photo">
        <img src="" alt="" id="imgUserPhoto">
    </div>
    <button class="reply_btn">发表</button>
</div>
</body>
<script>
    var geting = false;//是否加载信息，默认为false
    var currentPage = 1;//当前页
    var pageSize = 10;//每页数据数
    var senderId = "";
    var sendName = "";
    $(function () {
        $(".look_more").click(function () {
            $(".label_box").toggleClass("max_height")
        })
        $(".favorite").click(function () {
            $(this).find("i").toggleClass("favorite_o");
            $(this).find("i").toggleClass("active_favorite")
        });

        //获取热门评论
        $.ajax({
            url : "<%=basePath%>app/getActivityHotAnswerList",
            async:false,
            dataType : "json",
            type : "post",
            data : {
                "postId" : "${postDetails.commentsId}",
                "currentPage" : 1,
                "pageSize" : 5
            },
            success : function(data) {
                $.each(data, function (i, item) {
                    var html = '<div class="reply border-bottom-1">'+
                        '<div class="user clearFirx">'+
                        '<div class="photo float_l">'+
                        '<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.sendHeadImg+'" alt="">'+
                        '</div>'+
                        '<div class="reply_info float_l">'+
                        '<span class="name">'+item.sendName+'</span><br>'+
                        '<span class="time">'+item.createDate+'</span>'+
                        '</div>'+
                        '<div class="operation float_r">'+
                        '<span class="operation_btn praise">'
                    if(<%=state%> == 1 && item.state == 1){
                        html+='<i class="active_favorite"></i>'
                    }else{
                        html+='<i class="favorite_o"></i>'
                    }
                    html+='<span>'+item.praiseCount+'</span>'+
                        '</span>'+
                        '<input name="'+item.activityAnswerId+'" type="hidden" value="'+item.activityAnswerId+'">'+
                        '</div>'+
                        '</div>'
                    if(item.receiverId == "" || item.receiverId == null){
                        html+='<div class="reply_content" onclick="reply($(this),'+item.activityAnswerId+','+item.senderId+',\''+item.sendName+'\')">'+item.content+'</div>'
                    }else{
                        html+='<div class="reply_content" onclick="reply($(this),'+item.activityAnswerId+','+item.senderId+',\''+item.sendName+'\')">回复@'+item.receiverName+''+item.content+'</div>'

                    }
                    html+='</div>'
                    $(".hot_reply").append(html);
                    geting = false;
                })
            },
            error : function(data) {
            	layer.open({
				    content: '网络错误~'
				    ,skin: 'msg'
				    ,time: 3 //3秒后自动关闭
				  });
            }
        })

        getData();
        getMainData();
        
        $(window).scroll(function () {
            if (geting) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                currentPage++;
                getData();
            }

        });

        //赞||取消赞
        $('.praise').click(function () {
            if("<%=securityContextImpl%>" == "null"){
                window.location.href = "<%=basePath%>app/appLogin2";
                return;
            }

            var state = 1;
            var targetId = $(this).siblings('input').val();
            $.ajax({
                url: "<%=basePath%>app/addPraise",
                async:false,
                type: 'post',
                data: {"postId":"${postDetails.commentsId}","targetId":targetId,"praiseType":2},
                dataType: 'json',
                success: function (data) {
                    if(data.state==1){
                        state = 1;
                    }
                },error:function (){
                	layer.open({
                        content: '网络出现了异常，请稍等~'
                        ,skin: 'msg'
                        ,time: 3 //3秒后自动关闭
                    })
                }
            });

            if(state == 1){
                if($(this).find("i").attr("class") == "active_favorite"){
// 		    		$(this).find('span').html(Number($(this).find('span').text()) - 1);
                    $("input[name='"+targetId+"']").siblings(".praise").find('span').html(Number($(this).find('span').text()) - 1);
                }else{
// 		    		$(this).find('span').html(Number($(this).find('span').text()) + 1);
                    $("input[name='"+targetId+"']").siblings(".praise").find('span').html(Number($(this).find('span').text()) + 1);
                }
// 	    		$(this).find("i").toggleClass("favorite_o");
// 		        $(this).find("i").toggleClass("active_favorite");
                $("input[name='"+targetId+"']").siblings(".praise").find("i").toggleClass("favorite_o");
                $("input[name='"+targetId+"']").siblings(".praise").find("i").toggleClass("active_favorite");
            }
        });

        //发表评论
        $(".reply_btn").click(function () {
        	var activityId = $("#activityId").val();
        	var userPhoto = $("#userPhoto").val();
        	var userName = $("#userName").val();
        	var imgStr = "<%=basePath%>app/getGoodsPhotoByName?goodsImage="+userPhoto;
            if("<%=securityContextImpl%>" == "null"){
                window.location.href = "<%=basePath%>app/appLogin2";
                return;
            }
            if($("#content").val() == ""){
                layer.open({
                    content: '请输入内容'
                    ,skin: 'msg'
                    ,time: 3 //3秒后自动关闭
                })
                return false;
            }
            var datas = "";
            var contentStr="";
            if(senderId == ""){
                datas = {
                    "content":$("#content").val(),
                    "activityId":activityId
                }
                contentStr = $("#content").val();
            }else{
                datas = {
                    "content":$("#content").val(),
                    "activityId":activityId,
                    "receiverId":senderId,
                    "receiverName":sendName
                }
                contentStr = '回复@'+sendName+":"+$("#content").val();
            }
            $.ajax({
                url: "<%=basePath%>app/addActivityReply",
                async:false,
                type: 'post',
                data: datas,
                dataType: 'json',
                success: function (data) {
                    if(data.state==1){
                        layer.open({
                            content: '留言成功~'
                            ,skin: 'msg'
                            ,time: 3 //3秒后自动关闭
                        })

                        var html = '<div class="reply border-bottom-1">'+
                            '<div class="user clearFirx">'+
                            '<div class="photo float_l">'+
                            '<img src="'+imgStr+'" alt="">'+
                            '</div>'+
                            '<div class="reply_info float_l">'+
                            '<span class="name">'+userName+'</span><br>'+
                            '<span class="time">刚刚</span>'+
                            '</div>'+
                            '<div class="operation float_r">'+
                            '<span class="operation_btn praise">'+
                            '<i class="favorite_o"></i>'+
                            '<span>0</span>'+
                            '</span>'+
// 		                            '<input name="'+item.activityAnswerId+'" type="hidden" value="'+item.activityAnswerId+'">'+
                            '</div>'+
                            '</div>'+
                            '<div class="reply_content">'+contentStr+'</div>'+
                            '</div>'
                        $(".all_reply").append(html);
                        $('#content').val("");
                        $('#content').attr('placeholder',"评论一下吧~");
                        senderId = "";
                        sendName = "";
                    }else{
                        layer.open({
                            content: '留言失败~',
                            skin: 'msg',
                            time: 3 //3秒后自动关闭
                        })
                    }
                },error:function (){
                    layer.open({
                        content: '网络出现了异常，请稍等~'
                        ,skin: 'msg'
                        ,time: 3 //3秒后自动关闭
                    })
                }
            })
        })

    });

    //获取页面数据
    function getMainData(){
    	 var activityId = $("#activityId").val();
    	 $.ajax({
             url: "<%=basePath%>app/getActivityDetails",
             type: 'post',
             data: {"activityId":activityId},
             dataType: 'json',
             success: function (data) {
            	 $("#activityTitle").html(data.activityInfo.title);
            	 $("#activityContent").html(data.activityInfo.content);
            	 $("#activityTime").html(data.activityInfo.activityTime);
            	 $("#activityPhone").html(data.activityInfo.phone);
            	 $("#activityPlace").html(data.activityInfo.activityPlace);
            	 $("#activityDeadline").html(data.activityInfo.deadline);
            	 $("#userPhoto").val(data.userPhoto);
            	 $("#userId").val(data.userId);
            	 $("#userName").val(data.userName);
            	 var imgStr = "<%=basePath%>/app/getGoodsPhotoByName?goodsImage="+data.userPhoto;
            	 $("#imgUserPhoto").attr("src",imgStr);
            	 if(data.num==1){
            		 $("#applyBtn2").hide();
            		 $("#applyBtn1").show();
            	 }else if(data.num==0){
            		 $("#applyBtn1").hide();
            		 $("#applyBtn2").show();
            	 }else if(data.num==-1){
            		 $("#applyBtn1").hide();
            		 $("#applyBtn2").text("活动结束");
            		 $("#applyBtn2").show();
            	 }else if(data.num==-2){
            		 $("#applyBtn1").hide();
            		 $("#applyBtn2").text("已报名");
            		 $("#applyBtn2").show();
            	 }
             },error:function (){
            	 layer.open({
                     content: '网络出现了异常，请稍等~'
                     ,skin: 'msg'
                     ,time: 3 //3秒后自动关闭
                 })
             }
         });
    };
    
    
    
    //获取所有评论
    function getData() {
    	var activityId = $("#activityId").val();
        geting = true;
        $.ajax({
            url : "<%=basePath%>app/getActivityAnswerList",
            async:false,
            dataType : "json",
            type : "post",
            data : {
                "activityId" : activityId,
                "currentPage" : currentPage,
                "pageSize" : pageSize
            },
            success : function(data) {
                $.each(data, function (i, item) {
                    var html = '<div class="reply border-bottom-1">'+
                        '<div class="user clearFirx">'+
                        '<div class="photo float_l">'+
                        '<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.sendHeadImg+'" alt="">'+
                        '</div>'+
                        '<div class="reply_info float_l">'+
                        '<span class="name">'+item.sendName+'</span><br>'+
                        '<span class="time">'+item.createDate+'</span>'+
                        '</div>'+
                        '<div class="operation float_r">'+
                        '<span class="operation_btn praise">'
                    if(<%=state%> == 1 && item.state == 1){
                        html+='<i class="active_favorite"></i>'
                    }else{
                        html+='<i class="favorite_o"></i>'
                    }
                    html+='<span>'+item.praiseCount+'</span>'+
                        '</span>'+
                        '<input name="'+item.activityAnswerId+'" type="hidden" value="'+item.activityAnswerId+'">'+
                        '</div>'+
                        '</div>'
                    if(item.receiverId == "" || item.receiverId == null){
                        html+='<div class="reply_content" onclick="reply($(this),'+item.activityAnswerId+','+item.senderId+',\''+item.sendName+'\')">'+item.content+'</div>'
                    }else{
                        html+='<div class="reply_content" onclick="reply($(this),'+item.activityAnswerId+','+item.senderId+',\''+item.sendName+'\')">回复@'+item.receiverName+''+item.content+'</div>'

                    }
                    html+='</div>'
                    $(".all_reply").append(html);
                    geting = false;
                })
            },
            error : function(data) {
            	layer.open({
				    content: '网络错误~'
				    ,skin: 'msg'
				    ,time: 3 //3秒后自动关闭
				  });
            }
        })
    };

    //删除
    function reply(obj,aId,sId,sName){
    	var userId = $("#userId").val();
        activityAnswerId = aId;
        senderId = sId;
        sendName = sName;
        if("<%=securityContextImpl%>" == "null"){
            window.location.href = "<%=basePath%>app/appLogin2";
            return;
        }
        if(userId == senderId){
            //询问框
            layer.open({
                content: '确认删除该评论吗？',
                btn: ['确定', '取消'],
                yes: function(index){
                    obj.parent().remove();
                    $.ajax({
                        url: "<%=basePath%>app/delActivityAnswer",
                        timeout: 300000,
                        dataType: "json",
                        type: "post",
                        data: {
                            "activityAnswerId":aId
                        },success : function(data) {
                            layer.open({
                                content: '删除成功~',
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            })
                        },error : function() {
                            layer.open({
                                content: '网络异常,请稍后再试~'
                                ,skin: 'msg'
                                ,time: 3 //3秒后自动关闭
                            })
                        }
                    })
                }
            })
        }else{
            $("#content").focus();
            $('#content').attr('placeholder',"回复:"+sName);
        }
    };
    
    //报名
    function applyBtn(){
    	var activityId = $("#activityId").val();
    	//询问框
        layer.open({
            content: '确认参加报名吗？',
            btn: ['确定', '取消'],
            yes: function(index){
                $.ajax({
                    url: "<%=basePath%>app/addActivity",
                    timeout: 300000,
                    dataType: "json",
                    type: "post",
                    data: {
                        "activityId":activityId
                    },success : function(data) {
                    	if(data.num==1){
                    		layer.open({
                                content: '报名成功~',
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            })
                            $("#applyBtn1").hide();
                   		 	$("#applyBtn2").text("已报名");
                   		 	$("#applyBtn2").show();
                    	}else if(data.num==0){
                    		layer.open({
                                content: '报名失败,人数已满~',
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            })
                    	}else if(data.num==-1){
                    		layer.open({
                                content: '报名失败,活动结束~',
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            })
                    	}else if(data.num==-2){
                    		layer.open({
                                content: '报名失败,已报名~',
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            })
                            $("#applyBtn1").hide();
                   		 	$("#applyBtn2").text("已报名");
                   		 	$("#applyBtn2").show();
                    	}
                    },error : function() {
                        layer.open({
                            content: '网络异常,请稍后再试~'
                            ,skin: 'msg'
                            ,time: 3 //3秒后自动关闭
                        })
                    }
                })
            }
        })
    };
</script>
</html>